import React from 'react';

import {View, Text, Button,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert } from 'react-native';


import NativeLocalStorage from './specs/NativeLocalStorage';

// import { Button, Icon, WhiteSpace, WingBlank } from '@ant-design/react-native'
  

const EMPTY = '<empty>';


// 定义 dpToPx 函数
export  const dpToPx = (dp:number) => {
  const scale = PixelRatio.get();
  return Math.round(dp / scale);
};

export function greet(name:String) {
  console.log(`Hello, ${name}!`)
  return `Hello, ${name}!`;
}


export function MyLayout2(){

  const [value, setValue] = React.useState<string | null>(null);

  const [editingValue, setEditingValue] = React.useState<
string | null
>(null);


React.useEffect(() => {
  const storedValue = NativeLocalStorage?.getItem('myKey');
  setValue(storedValue ?? '');
  }, []);


  function saveValue() {
    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
    setValue(editingValue);
  }

  function clearAll() {
  NativeLocalStorage?.clear();
  setValue('');
}





function deleteValue() {
  NativeLocalStorage?.removeItem(editingValue ?? EMPTY);
  setValue('');
}

function start() {
  NativeLocalStorage?.start('123');
}

  return (
  <View>
 <Text
      >
      Hello
      </Text>
      <MyButton01 text="打开首页1" onClick={start}></MyButton01>
      <Text style={styles.text}>
        Current stored value is: {value ?? 'No Value'}
      </Text>
      <TextInput
        placeholder="Enter the text you want to store"
        style={styles.textInput}
        onChangeText={setEditingValue}
      />
      <Button title="Save" onPress={saveValue} />
      <Button title="Delete" onPress={deleteValue} />
      <Button title="Clear" onPress={clearAll} />

  </View>
    //     <WingBlank 
    //     style={{
    //       marginTop: 5,
    //       width:'50%'
    //     }}>
    //   <WhiteSpace />
    // <Button>default</Button>
    // <WhiteSpace />
    // <WhiteSpace />
    // <WhiteSpace />
    // <Button disabled>default disabled</Button>
    // <WhiteSpace />
    // </WingBlank>
  )


  }


export function MyLayout(){
  return (
<View style={styles.buttonWrapper}>

{/* <Button>default</Button> */}


{/* <Button type="primary" onPress={() => Alert.alert('Primary Button Clicked')}>
        Primary Button
      </Button> */
      }


<TouchableOpacity style={{
position:"absolute",
top:10,
width:"50%",
height:300,
backgroundColor:"#889933"
}}
    >
      <Text
      >
      Hello
      </Text>
    </TouchableOpacity>





      </View>
  )
}

// 自定义 MyButton01 组件
const MyButton01 = ({
  alpha = 1.0, // 透明度
  text = '',
  containerColor = '#0000ff', // 默认背景色 (MYBLACK_Percent5)
  shape = 10/3.5, // 圆角 (ButtonDefaults.shape)
  textColor = '#FFFFFF', // 默认文字颜色
  size = { width: 148/3.5, height: 48/3.5 }, // 按钮尺寸
  fontSize = 24/3.5, // 默认字体大小 (MyFont_Size)
  fontWeight = 'normal', // 字体粗细
  fontFamily = 'SourceHanSansCN-Regular', // 字体
  onClick = (text:String) => {}, // 点击事件回调
}) => {
  const fontSizeInPx = 24
  const fontSizeInDp = dpToPx(fontSizeInPx); // 根据屏幕密度计算 dp
  return (
    <TouchableOpacity
      onPress={() => onClick(text)}
      style={[
        styles.button,
        {
          backgroundColor: containerColor,
          borderRadius: shape,
          width: size.width,
          height: size.height,
          opacity: alpha,
        },
      ]}
    >

      <Text
        style={{
          color: textColor,
          fontSize: fontSizeInDp,
          // fontWeight: fontWeight,
          // fontFamily: fontFamily, // 自定义字体
        }}
      >
        {text}
      </Text>
    </TouchableOpacity>
  );
};


// 样式表
const styles = StyleSheet.create({
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 0, // 等价于 contentPadding: PaddingValues(0.dp)
  },

  buttonWrapper: {
    flexDirection:"column",
    gap:10,
    // flex: 1, // 占据整个屏幕
    // alignItems: "center", // 水平居中
    justifyContent: "flex-end", // 垂直居中
    // position: "absolute", // 绝对定位
    // bottom: 16, // 距底部 16px
    // right: 16, // 距右侧 16px
  },
  spacer: {
    height:10
  },


  text: {
    margin: 10,
    fontSize: 20,
  },
  textInput: {
    margin: 10,
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    paddingLeft: 5,
    paddingRight: 5,
    borderRadius: 5,
  },

});


export const MYBLACK = '#333333'; // 不带 alpha 通道

// myConstant.js
export const MYBLUE = '#2c72e5';

export const MYBLACK_Percent5 = 'rgba(51, 51, 51, 0.05)';

// export default MyButton01;
export {MyButton01};


